// import { ftCreate, ftUpdate } from '@/service/modules/tag';
import { Form, Input, message, Modal } from 'antd';
import md5 from 'crypto-js/md5';
import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';
import { useModel } from 'umi';

type Iprops = {
  onClose: (refresh?: boolean) => void;
  open: boolean;
  title: string;
  data: any;
};
type FormValues = {
  oldpassword: string;
  confirmPassword1: string;
  confirmPassword2: string;
};

export interface IAddOrUpdateRef {
  init: () => void;
}

const AddOrUpdate = (props: Iprops, ref: React.Ref<IAddOrUpdateRef>) => {
  const { onClose, open, title, data } = props;
  const [form] = Form.useForm<FormValues>();
  const { createAction, updateAction, resetPasswordAction } = useModel('usersModel');

  async function onOk() {
    // 检查form数据
    await form.validateFields();

    const from = form.getFieldsValue(['oldpassword', 'confirmPassword1']);

    const { oldpassword, confirmPassword1 } = from;

    // 对密码进行 MD5 加密
    const encryptedPassword1 = md5(oldpassword).toString();
    const encryptedPassword2 = md5(confirmPassword1).toString();
    let res = await resetPasswordAction(
      {
        id: detailData.id,
        oldPassword: encryptedPassword1,
        newPassword: encryptedPassword2,
      },
      true,
    );
    const { code, message: msg } = res;
    if (code === 200) {
      message.success('操作成功');
      onCancel();
    } else {
      message.error(`操作失败: ${msg}`);
    }
  }
  function onCancel() {
    form.resetFields();
    onClose();
  }

  const [detailData, setDetailData] = useState<any>(null);

  useEffect(() => {
    if (!data) return;
    const { id, password } = data;
    setDetailData({
      id,
      password,
    });
  }, [data]);

  function compareToFirstPassword(rule: any, value: any, callback: (error?: string) => void) {
    if (value && value !== form.getFieldValue('confirmPassword1')) {
      callback('两次输入的密码不一致!');
    } else {
      callback();
    }
  }

  useImperativeHandle(ref, () => {
    return {
      init() {
        console.log('use的方法被使用');
      },
    };
  });

  return (
    <Modal
      title={title}
      closable={{ 'aria-label': 'Custom Close Button' }}
      open={open}
      onOk={onOk}
      onCancel={onCancel}
    >
      <Form form={form} name="demo_form" layout="vertical">
        <Form.Item
          label="旧密码"
          name="oldpassword"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password placeholder="请输入密码" />
        </Form.Item>

        <Form.Item
          label="新密码"
          name="confirmPassword1"
          rules={[{ required: true, message: '请输入密码!' }]}
        >
          <Input.Password placeholder="请输入密码" />
        </Form.Item>

        <Form.Item
          label="确认密码"
          name="confirmPassword2"
          rules={[
            { required: true, message: '请输入确认密码!' },
            { validator: compareToFirstPassword },
          ]}
        >
          <Input.Password placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default memo(forwardRef(AddOrUpdate));
